<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
  <div>
      <div class="container">
          <el-form :model="formInline" class="select-submit-form">
                <el-row type="flex">
                    <el-col :span="8">
                        <el-form-item label="大病赔案号" >
                          <el-input  placeholder="请输入赔案号" v-model="formInline.caseNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item label="被保险人">
                            <el-input  placeholder="请输入被保险人" v-model="formInline.insuredName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item label="证件号">
                            <el-input  placeholder="请输入证件号" v-model="formInline.documentNo"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="8">
                      <el-form-item label="任务状态" prop="taskState">
                        <el-select  v-model="formInline.taskState" >
                          <el-option
                            v-for="item in taskState"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                      <div class="select-btn-group">
                        <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                        <el-button type="primary" size="medium" @click="handleReset('formInline')">重置</el-button>
                      </div>
                    </el-col>
                </el-row>
          </el-form>
          <el-table
              :data="tableData"
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              style="margin: 30px 0;border: 1px solid #d6d9d8;"
              v-loading="loading"
              element-loading-text="Loading....."
          >
             <el-table-column prop="" label="大病赔案号" width="160px"  align="center">
               <template slot-scope="scope" >
                 <a @click="applicant(scope.row)" style="color: #1e99f9;cursor: pointer">{{ scope.row.caseNo }}</a>
               </template>
             </el-table-column>
            <el-table-column prop="policyNo" label="保单号"  align="center" width="188px">
            </el-table-column>
                <el-table-column prop="socialSecurityNo" label="社/医保号"  align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.socialSecurityNo }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="被保险人"  align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.insuredName }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="documentNo" label="证件号" align="center" width="188px">
                </el-table-column>
                <el-table-column prop="" label="流入时间"  align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.flowInTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="taskState" :formatter="taskStateFormat" label="任务状态"  align="center">
                </el-table-column>
          </el-table>
          <div class="pagination" v-if="this.tableData.length!==0">
            <div class="index_page">
              <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                            :page-sizes="[10, 20, 50, 100]"
                            :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                            @size-change="handleSizeChange" @current-change="queryFun">
              </el-pagination>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import * as api from '@/api/baseDate'
export default {
name: 'caseCancel',
    data() {
        return {
            loading: false,
            pagination: {
              currentPage: 1, // 当前页
              rowsNumber: 10, // 每页条数
              totalPage: 0 // 总条数
            },
            taskState1:0,
            taskState:[
              {
                value: '01',
                label: '申请',

              },{
                value: '05',
                label: '退回',

              },{
                value: '03',
                label: '已处理',

              }
            ],
            item:0,
            centerDialogVisible:false,
            redore: true,
            guanzhus: null,
            value:'',
            tableData: [
            ],
            formInline: {
              taskState:'01'
            },
            taskApplicant:{},
            state:0,
        }
    },
    created() {
    },
    methods: {
        // 改变当前页条数事件
        handleSizeChange(pageSize){ 
            this.pagination.rowsNumber=pageSize
            this.queryCancelTaskList();
        },
        // 改变当前页事件
        queryFun(pageNum){ 
            this.pagination.currentPage=pageNum
            this.queryCancelTaskList();
        },
        // 查询
        handleSearch(){
            this.queryCancelTaskList();
        },
        // 重置
        handleReset(formName){
             this.$refs[formName].resetFields();
        },
        // 状态转换
        taskStateFormat(row, column) {
            let taskState = row.taskState
            if (taskState === '05') {
              return '退回'
            } else if (taskState === '03') {
              return '已处理'
            } else if (taskState === '01'||taskState === '02'){
              return '申请'
            }
        },
        // 查询案件列表
        queryCancelTaskList() {
          if(this.formInline.taskState==="01"){
            var data={
              "caseNo": this.formInline.caseNo,
              "insuredName": this.formInline.insuredName,
              "documentNo": this.formInline.documentNo,
              "pageNum":this.pagination.currentPage,
              "pageSize":this.pagination.rowsNumber,
              "state": "01",
            }
            this.loading = true;
            api.getQueryCancelTask(data
            ).then(res => {
              this.loading = false;
              if(res){
                if(res.data.resultCode !== '0000'){
                  this.$message.error(res.data.resultMsg);
                }else{
                  this.tableData1 = res.data.list;
                  this.pagination.totalPage = res.data.total;
                  this.tableData=this.tableData1.map(item=>{
                    return{
                      taskState:item.state,
                      caseNo:item.caseNo,
                      insuredName:item.insuredName,
                      documentType:item.documentType,
                      documentNo:item.documentNo,
                      policyNo:item.policyNo,
                      medicalInsuranceNo:item.medicalInsuranceNo,
                      socialSecurityNo:item.socialSecurityNo,
                      flowInTime:item.flowInTime,
                      flowId:item.flowId,
                      taskType:item.taskType,
                    }
                  })
                }
              }else{
                this.$message.error('系统异常');
              }
            })
          }else {
            var data={
              "caseNo": this.formInline.caseNo,
              "insuredName": this.formInline.insuredName,
              "documentNo": this.formInline.documentNo,
              "taskState": this.formInline.taskState,
              "pageNum":this.pagination.currentPage,
              "pageSize":this.pagination.rowsNumber,
              "taskType":"cancel_audit",
            }
            this.loading = true;
            api.getQueryCancelTask(data
            ).then(res => {
              this.loading = false;
              if(res){
                if(res.data.resultCode !== '0000'){
                  this.$message.error(res.data.resultMsg);
                }else{
                  this.tableData = res.data.list;
                  this.state=this.tableData.state;
                  this.pagination.totalPage = res.data.total;
                }
              }else{
                this.$message.error('系统异常');
              }
            })
          }
        },
        // 跳转注销申请页面
        applicant(row) {
          this.taskApplicant = row;
          if(this.taskApplicant.taskState==='退回'||this.taskApplicant.taskState==='已处理'||this.taskApplicant.taskState==='05'||this.taskApplicant.taskState==='03'){
            this.item=1;
          }
            this.$router.push({
              name: 'caseCancelDetail',
              query: {
                taskApplicant: JSON.stringify(this.taskApplicant),
                item: JSON.stringify(this.item),
              }
            })
        },
    },
}
</script>